<template>
    <div class="dashboard-container">
      <!-- 顶部标题 -->
      <div class="header animate__animated animate__fadeInDown">
        <h1>欢迎使用教育平台管理系统</h1>
        <div class="time">{{ currentTime }}</div>
      </div>
  
      <!-- 数据概览 -->
      <el-row :gutter="20" class="data-overview">
        <el-col 
          v-for="(item, index) in statsData"
          :key="index"
          :xs="24" :sm="12" :md="6"
          class="animate__animated animate__fadeInUp"
          :style="{ animationDelay: `${index * 0.2}s` }"
        >
          <el-card class="stats-card" shadow="hover">
            <div class="card-content">
              <el-icon :size="40" :color="item.color" class="icon">
                <component :is="item.icon" />
              </el-icon>
              <div class="info">
                <div class="value">{{ item.value }}</div>
                <div class="title">{{ item.title }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
  
      <!-- 主要功能区 -->
      <el-row :gutter="20" class="main-content">
        <!-- 监控视图 -->
        <el-col :xs="24" :lg="20" class="animate__animated animate__fadeInLeft">
          <OrderStats/>
        </el-col>
  
        <!-- 快速导航 -->
        <el-col :xs="24" :lg="4" class="animate__animated animate__fadeInRight">
          <el-card shadow="hover" class="quick-nav">
            <template #header>
              <div class="card-header">
                <el-icon><Menu /></el-icon>
                <span>快速导航</span>
              </div>
            </template>
            <el-row :gutter="20">
              <el-col 
                v-for="(nav, index) in quickNavs"
                :key="index"
                :xs="12" :sm="8" :lg="12"
                class="nav-item"
              >
                <el-button 
                  type="primary" 
                  :icon="nav.icon" 
                  circle
                  @click="handleNavClick(nav)"
                />
                <div class="nav-title">{{ nav.title }}</div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
  import { useRouter } from 'vue-router'
  import { VideoCamera, Menu, User, Lock, Histogram, Warning, List } from '@element-plus/icons-vue'
  import { use } from 'echarts/core'
  import { CanvasRenderer } from 'echarts/renderers'
  import { LineChart, PieChart } from 'echarts/charts'
  import { GridComponent, TooltipComponent, TitleComponent } from 'echarts/components'
  import VChart from 'vue-echarts'
  import OrderStats from './OrderStats.vue'
import { getDashboardApi } from '@/api/dashboard'
  use([CanvasRenderer, LineChart, PieChart, GridComponent, TooltipComponent, TitleComponent])
  
  const router = useRouter()
  
  // 当前时间
  const currentTime = ref('')
  let timer: number
  
  const statsData = ref([])

  const loadStats = async () => {
  try {
    const res = await getDashboardApi()
    const data = res.data
    
    statsData.value = [
      { 
        title: '用户人数', 
        value: data.userTotal.toLocaleString(),
        icon: User, 
        color: '#409EFF'
      },
      { 
        title: '今日刷题',
        value: data.todayExercises,
        icon: List, 
        color: '#67C23A'
      },
      { 
        title: '今日考试',
        value: data.todayExams,
        icon: Warning, 
        color: '#E6A23C'
      },
      { 
        title: '订单总额',
        value: `¥${(data.orderTotalAmount / 100).toFixed(2)}`,
        icon: Lock, 
        color: '#F56C6C' 
      }
    ]
  } catch (error) {
    console.error('获取统计信息失败', error)
  }
}


  
  const quickNavs = [
    { title: '用户管理', icon: User, path: '/system/user' },
    { title: '题库管理', icon: Lock, path: '/questionbank/bank' },
    { title: '考试中心', icon: VideoCamera, path: '/exam/paper-center' },
    { title: '成绩分析', icon: Histogram, path: '/exam/score-analysis' }
  ]
  
  const monitorChartOption = reactive({
    xAxis: {
      type: 'category',
      data: ['监区A', '监区B', '监区C', '监区D', '监区E', '监区F']
    },
    yAxis: { type: 'value' },
    series: [{
      data: [120, 200, 150, 80, 70, 110],
      type: 'line',
      smooth: true,
      areaStyle: {}
    }]
  })
  
  const updateTime = () => {
    const now = new Date()
    currentTime.value = now.toLocaleString()
  }
  
  const handleNavClick = (nav: any) => {
    router.push(nav.path)
  }
  
  onMounted(() => {
    updateTime()
    timer = setInterval(updateTime, 1000)
    loadStats()
  })
  
  onBeforeUnmount(() => {
    clearInterval(timer)
  })
  </script>
  
  <style lang="scss" scoped>
  .dashboard-container {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: 100vh;
  
    .header {
      text-align: center;
      margin-bottom: 30px;
      h1 {
        color: #304156;
        font-size: 28px;
        margin-bottom: 10px;
      }
      .time {
        color: #909399;
        font-size: 16px;
      }
    }
  
    .data-overview {
      margin-bottom: 20px;
      .stats-card {
        margin-bottom: 20px;
        transition: transform 0.3s;
        &:hover {
          transform: translateY(-5px);
        }
        .card-content {
          display: flex;
          align-items: center;
          padding: 20px;
          .icon {
            margin-right: 20px;
          }
          .info {
            .value {
              font-size: 24px;
              font-weight: bold;
              margin-bottom: 5px;
            }
            .title {
              color: #909399;
              font-size: 14px;
            }
          }
        }
      }
    }
  
    .chart-card, .quick-nav {
      margin-bottom: 20px;
      .card-header {
        font-size: 18px;
        font-weight: bold;
        display: flex;
        align-items: center;
        .el-icon {
          margin-right: 10px;
        }
      }
      .chart {
        height: 400px;
      }
    }
  
    .quick-nav {
      .nav-item {
        text-align: center;
        padding: 20px;
        .el-button {
          width: 60px;
          height: 60px;
          font-size: 24px;
          margin-bottom: 10px;
        }
        .nav-title {
          font-size: 14px;
          color: #606266;
        }
      }
    }
  }
  
  // 动画效果
  .animate__animated {
    animation-duration: 0.5s;
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .animate__fadeInUp {
    animation-name: fadeInUp;
  }
  </style>